<template>
	<div class="page" style="background-color: var(--el-bg-color-page)">
		<div class="p-10 system-page-background b-r-4">
			<my-form
				inline
				query
				label-width="70px"
				:model="queryParams"
				:formItem="[
					{
						itemType: 'select',
						prop: 'dictType',
						label: '字典名称',
						list: typeOptions,
						fileType: { label: 'dictName', value: 'dictType' }
					},
					{ prop: 'likeDictLabel', label: '字典标签' },
					{
						itemType: 'select',
						prop: 'status',
						label: '状态',
						list: $store.dict.sysNormalDisable
					}
				]"
				:searchFn="() => refTable.reload()"
			/>
		</div>
		<div class="f1 h0 flex-col system-page-background m-t-10 b-r-4">
			<div class="p-10">
				<el-button type="primary" icon="Plus" @click.prevent="insertFn(), (dialog.form.dictType = queryParams.dictType)"
					>新增</el-button
				>
				<el-button
					type="danger"
					:disabled="!tableSelection.length"
					@click.prevent="deleteFn(tableSelection)"
					icon="Delete"
					>删除</el-button
				>
			</div>
			<my-list-panel ref="refTable" :loadFn="loadData" :total="state.total" :isAuto="false">
				<my-table :data="state.list" :columns="state.columns" @selection-change="(val) => (tableSelection = val)">
					<template #default="{ row }">
						<my-button-text @click.prevent="updateFn(row), (dialog.form.dictType = queryParams.dictType)"
							>修改</my-button-text
						>
						<my-button-text @click.prevent="detailFn(row), (dialog.form.dictType = queryParams.dictType)"
							>详情</my-button-text
						>
					</template>
				</my-table>
			</my-list-panel>
		</div>
		<!-- 添加或修改参数配置对话框 -->
		<el-dialog :title="dialogTitle" v-model="dialog.open" width="500px" append-to-body @closed="resetForm(dialogForm)">
			<my-form
				ref="refDialogForm"
				label-width="80px"
				:model="dialog.form"
				:formItem="[
					{ prop: 'dictType', label: '字典类型', disabled: true },
					{ prop: 'dictLabel', label: '数据标签', required: true },
					{ prop: 'dictValue', label: '数据键值', required: true },
					{
						itemType: 'number',
						prop: 'dictSort',
						label: '显示排序',
						min: 0,
						required: true
					},
					{ prop: 'status', label: '状态' },
					{ prop: 'remark', label: '备注', type: 'textarea' }
				]"
				:disabled="['detail'].includes(dialog.name)"
				class="validate--bottom"
			>
				<template #status>
					<el-radio-group v-model="dialog.form.status">
						<el-radio v-for="dict in $store.dict.sysNormalDisable" :key="dict.dictValue" :label="dict.dictValue * 1">
							{{ dict.dictLabel }}
						</el-radio>
					</el-radio-group>
				</template>
			</my-form>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取消</el-button>
				<el-button type="primary" @click.prevent="dialogSubmitFn()">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import {
	pageDatadict as page,
	removeDatadict as remove,
	addDatadict as add,
	editDatadict as edit,
	pageTypedict
} from '@/api/system';

const props = defineProps({
	routerMage: {
		type: Object,
		default: () => ({})
	}
});

// 下拉选项数据
const typeOptions = ref([]);
pageTypedict().then((res) => {
	typeOptions.value = res.data.rows;
	refTable.value.reload();
});

/********************************************************** 表格增删改查 ***********************************************************/
const columns = [
	{
		type: 'selection'
	},
	{
		label: '字典编码',
		prop: 'id',
		width: '80'
	},
	{
		label: '字典标签',
		prop: 'dictLabel',
		'show-overflow-tooltip': true
	},
	{
		label: '字典键值',
		prop: 'dictValue',
		'show-overflow-tooltip': true
	},
	{
		label: '字典排序',
		prop: 'dictSort'
	},
	{
		label: '状态',
		prop: 'status',
		formatter: (row) => selectDictLabel($store.dict.sysNormalDisable, row.status),
		width: '60'
	},
	{
		label: '备注',
		prop: 'remark',
		'show-overflow-tooltip': true
	},
	{
		label: '创建时间',
		prop: 'createTime',
		width: '160'
	},
	{
		label: '操作',
		width: 120
	}
];

const {
	queryParams,
	refTable,
	state,
	tableSelection,
	refDialogForm,
	dialog,
	dialogTitle,
	loadData,
	insertFn,
	deleteFn,
	updateFn,
	detailFn,
	dialogSubmitFn
} = pageMixin({
	queryParamsDefault: {
		orderByColumn: 'dictSort',
		isAsc: 'asc'
	},
	columns,
	api: { page, remove, add, edit },
	dialogDefault: {
		title: '字典数据',
		form: {
			id: undefined,
			dictSort: 0,
			status: 0
		}
	}
});
watch(
	() => props.routerMage,
	(val) => {
		queryParams.dictType = val.dictType;
	},
	{ immediate: true }
);

$store.dict.GETsysNormalDisable();
</script>
